import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import SvgIcon from "@components/SvgIcon";
import { useNavigate, useSearchParams } from "react-router-dom";
import { connect } from "react-redux";
import {
    createTaskAction,
    getTaskListAction,
    setTaskDoneAction,
    delOneTaskAction,
    clearAllTasksAction,
} from "@redux/actions02";
import toast from "@utils/showToast";
import moment from "moment";

const Todos = (props) => {
    const navigate = useNavigate();
    const [params] = useSearchParams();
    const {
        createTaskAction,
        getTaskListAction,
        taskList,
        setTaskDoneAction,
        delOneTaskAction,
        clearAllTasksAction,
    } = props;
    const taskDate =
        params.get("y") + "-" + params.get("m") + "-" + params.get("d");

    const [isEdit, setIsEdit] = useState(false);
    const [title, setTitle] = useState("");
    const [content, setContent] = useState("");
    const [preDate, setPreDate] = useState("");

    const submitNewTask = () => {
        if (!title) {
            toast.fail("还没填标题！");
            return;
        }

        if (!content) {
            toast.fail("还没描述任务详情！");
            return;
        }

        if (preDate) {
            if (!preDate.includes("-")) {
                toast.fail("预计完成日期格式不正确");
                return;
            }

            const arr = preDate.split("-");

            if (arr.length !== 3) {
                toast.fail("预计完成日期格式不正确");
                return;
            }

            for (let i = 0; i < arr.length; i++) {
                if (isNaN(Number(arr[i]))) {
                    toast.fail("预计完成日期格式不正确");
                    return;
                }
            }

            if (new Date(taskDate).getTime() > new Date(preDate).getTime()) {
                toast.fail("预计完成日期过小！");

                return;
            }
        }

        setIsEdit(false);

        createTaskAction(taskDate, title, content, preDate);

        setTitle("");
        setContent("");
        setPreDate("");
    };

    useEffect(() => {
        getTaskListAction(taskDate);
    }, [getTaskListAction, taskDate]);

    return (
        <div className={styles.todos}>
            <div className={styles.oper_wrap}>
                <div className={styles.oper}>
                    {new Date(
                        params.get("y") +
                            "/" +
                            params.get("m") +
                            "/" +
                            params.get("d")
                    ).getTime() <
                    new Date(
                        new Date().getFullYear() +
                            "/" +
                            (new Date().getMonth() + 1) +
                            "/" +
                            new Date().getDate()
                    ).getTime() ? null : (
                        <div
                            className={styles.create}
                            title="创建新任务"
                            onClick={() => {
                                setIsEdit(true);
                            }}
                        >
                            <SvgIcon font="icon-xingtuxuetang-chuangjianwendangcitiao-" />
                        </div>
                    )}
                    <div
                        className={styles.clear}
                        title="清除全部任务"
                        onClick={() => {
                            taskList.length
                                ? clearAllTasksAction(taskDate)
                                : toast.info("已经清空任务了哦~");
                        }}
                    >
                        <SvgIcon font="icon-qingchu" />
                    </div>
                    <div
                        className={styles.back_home}
                        title="返回首页"
                        onClick={() => {
                            navigate("/");
                        }}
                    >
                        <SvgIcon font="icon-go_gopher" />
                    </div>
                </div>
            </div>
            <div className={styles.wrap}>
                <div className={styles.title}>
                    {params.get("y")}年{params.get("m")}月{params.get("d")}
                    日任务表
                </div>
                <ul className={styles.todo_ul}>
                    {taskList &&
                        taskList.map((item, index) => {
                            return (
                                <li
                                    key={item.taskId}
                                    className={item.isDone ? styles.done : ""}
                                >
                                    <p className={styles.todo_title}>
                                        <span>标题：</span>
                                        {item.title}
                                    </p>
                                    <p className={styles.detail}>
                                        <span>详情：</span>
                                        {item.content}
                                    </p>
                                    <p className={styles.pre_date}>
                                        <span>预计完成日期：</span>
                                        {item.preDate
                                            ? moment(item.preDate).format(
                                                  "YYYY年MM月DD日"
                                              )
                                            : "无"}
                                    </p>
                                    {item.isDone ? null : (
                                        <div
                                            className={styles.todone}
                                            title="设为已完成"
                                            onClick={() => {
                                                setTaskDoneAction(item.taskId);
                                            }}
                                        >
                                            <SvgIcon font="icon-wancheng" />
                                        </div>
                                    )}
                                    <div
                                        className={styles.del}
                                        title="删除任务"
                                        onClick={() => {
                                            delOneTaskAction(item.taskId);
                                        }}
                                    >
                                        <SvgIcon font="icon-shanchu" />
                                    </div>
                                </li>
                            );
                        })}
                </ul>
            </div>
            <div
                className={`${styles.bounced} ${isEdit ? styles.edit : ""}`}
                onClick={() => {
                    setIsEdit(false);
                }}
            >
                <div
                    className={styles.edit_area}
                    onClick={(e) => {
                        e.stopPropagation();
                    }}
                >
                    <div className={styles.head}>创建任务中...</div>
                    <div className={styles.task_title}>
                        <span>标题：</span>
                        <input
                            type="text"
                            className={styles.inp_title}
                            value={title}
                            onChange={(e) => {
                                setTitle(e.target.value.trim());
                            }}
                        />
                    </div>
                    <div className={styles.task_content}>
                        <span>详情：</span>
                        <textarea
                            className={styles.inp_content}
                            placeholder="描述任务详情，最多100字"
                            maxLength={100}
                            value={content}
                            onChange={(e) => {
                                setContent(e.target.value.trim());
                            }}
                        ></textarea>
                    </div>
                    <div className={styles.expect_date}>
                        <span>
                            预计完成
                            <br />
                            日期：
                        </span>
                        <input
                            type="text"
                            className={styles.inp_date}
                            placeholder="格式: 2022-9-6,选填"
                            value={preDate}
                            onChange={(e) => {
                                setPreDate(e.target.value.trim());
                            }}
                        />
                    </div>
                    <button
                        className={styles.submit}
                        onClick={() => {
                            submitNewTask();
                        }}
                    >
                        提交
                    </button>
                </div>
            </div>
        </div>
    );
};

export default connect(
    (state) => ({
        taskList: state.taskListReducer,
    }),
    {
        createTaskAction,
        getTaskListAction,
        setTaskDoneAction,
        delOneTaskAction,
        clearAllTasksAction,
    }
)(Todos);
